<template>
  <div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="90%">
      <div class="ListDialog">
        <Newtitle @command="command" @daochu="daochu" @shuaxin="getdatalist">
        <template #leftother>
          <div>用电明细</div>
        </template>
      </Newtitle>
      <div class="table">
        <TableColumn 
          :issize="iissize"
          ref="tabledata"
          :tableData="tableData" 
          :tableConfig="tableConfig">
          <el-table-column
          prop="totalValue"
          label="总用电(kWh)"
          align="right"
          fixed="right"
          width="110">
        </el-table-column>
        <el-table-column
          prop="totalAmount"
          label="总电费(元)"
          fixed="right"
          align="right"
          width="100">
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="100">
            <template #default="{row}">
              <el-tooltip class="item" effect="dark" content="浏览" placement="top">
                <i @click="chakan(row)" class="el-icon-view" style="color: #1a90fe;cursor: pointer;"></i>
              </el-tooltip>
            </template>
        </el-table-column>
        </TableColumn>
      </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
          :title="title"
          :visible.sync="dialogVisibles"
          width="70%">
          <div>
            <div class="diatext">
              <div class="littleboss">用户名称 : {{ rowvalue.customerName}}</div>
              <div class="littleboss">用户编号 : {{  rowvalue.customerCode }}</div>
            </div>
            <div v-for="(item,index) in forlist" :key="index" style="margin: 20px 0">
                    <div  style="font-size: 14px;margin-bottom: 10px;color:#000;margin-bottom: 20px;display: flex;">
                      <div style="width: 50%;">电表名称 : {{ rowvalue.meterName }} </div>
                      <div style="width: 50%;">抄表时间 : {{ item.meterReadingStartDate }} 至 {{ item.meterReadingEndDate }}</div>
                    </div>
                    <div class="dianfeitable">
                      <TableColumn
                        ref="tabledata"
                        :tableData="item.childenlist" 
                        :tableConfig="tableConfigs" 
                        size="medium">
                      </TableColumn>
                    </div>
            </div>
            </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisibles = false">关闭</el-button>
          </span>
        </el-dialog>
  </div>
</template>
<script>
import {MakemeterEleclist,MakemeterWorterlist} from '../month-report/MakeList'
import {exportexcel} from '@/utils/excel'
import TableColumn from '@/components/Table'
import Newtitle from '@/components/TopTitle/newtitle.vue'
import {getdaydetailsapi,getwebmingxiapi} from '@/api/prwpaid/report-forms/detail'
export default {
  name: 'CallPoliceListDialog',
  components: {
    Newtitle,
    TableColumn
  },
  data() {
    return {
      title: '',
      forlist:[],
      rowvalue: {},
      dialogVisible: false,
      dialogVisibles:false,
      tableData: [],
      iissize: 'medium',
      tableConfigs: [],
      tableConfig:  [
        { label: '序号', type: 'index', center: 'center', width: '70' },
        { label: '日期', prop: 'date' ,center:'center', width: '110'},
        { label: '建筑群名称', prop: 'buildingName', width: '210'  },
        { label: '用户名', prop: 'customerName', width: '210'  },
        { label: '用户编号', prop: 'customerCode' , width: '200'},
        { label: '电表名称', prop: 'meterName', width: '200' },
        { label: '尖用电(kWh)', prop: 'sharpValue', center: 'right', width: '110' },
        { label: '尖电费(元)', prop: 'sharpAmount', center: 'right' , width: '100'},
        { label: '峰用电(kWh)', prop: 'peakValue', center: 'right', width: '110' },
        { label: '峰电费(元)', prop: 'peakAmount', center: 'right' , width: '100'},
        { label: '平用电(kWh)', prop: 'flatValue', center: 'right', width: '110' },
        { label: '平电费(元)', prop: 'flatAmount', center: 'right' , width: '100'},
        { label: '谷用电(kWh)', prop: 'valleyValue' ,center:'right', width: '110'},
        { label: '谷电费(元)', prop: 'valleyAmount', center: 'right' , width: '100'},
        { label: '深谷用电(kWh)', prop: 'deepValleyValue' ,center:'right', width: '140'},
        { label: '深谷电费(元)', prop: 'deepValleyAmount',center:'right' , width: '120'},
      ],
      listvalue:{}
    };
  },

  mounted() {
    
  },

  methods: {
    todialog(val) {
      this.listvalue=val
      this.dialogVisible = true
      this.getdatalist()
    },
    async getdatalist() {
      const {data:{list}} = await getdaydetailsapi({
        customerId:this.listvalue.customerId,energyType: 'ELEC',date:this.listvalue.date
      })
      const array=list.map(ele => {
        return {
          ...ele,
          date: this.listvalue.date,
          buildingName:this.listvalue.buildingName,
          customerName:this.listvalue.customerName,
          customerCode:this.listvalue.customerCode
        }
      })
     this.tableData=array
     },
        // 导出
    daochu() {
      exportexcel('/mbm-microservice-biz/mbm/report/user/electric/statistics/details/exportExcel', {
        customerId:this.listvalue.customerId,energyType: 'ELEC',date:this.listvalue.date
      },'日用电用水')
    },
     // 表格密度调节
    command(val) {
      this.iissize = val
    },
        //查看详情
    async chakan(row) {
      this.title=`${row.buildingName} ${row.customerName} ${row.date} 用电明细`
      this.rowvalue = row
      // const energyType=this.yomgnenglist.filter(ele=>ele.text==row.meterType)[0].value
      const res= await getwebmingxiapi({
        date:row.date,measuringPointId:row.measuringPointId,priceSchemeId:row.priceSchemeId,
        timeType:'month'
      })
      if (!row.meterType||row.meterType=='电') {
        this.forlist = MakemeterEleclist(res.data.list,row)
        this.tableConfigs=[      { label: '用电明细', prop: 'mingxi' },
        { label: '上期示数', prop: 'shangqi' ,center:'right'},
        { label: '本期示数', prop: 'benqi', center: 'right' },
        { label: 'CT', prop: 'ct' ,center:'right'},
        { label: 'PT', prop: 'pt', center: 'right' },
        { label: '电量(kWh)', prop: 'dianliang',center:'right'},
        { label: '单价(元/kWh)', prop: 'danjia',center:'right',width:'120'  },
          { label: '电费金额(元)', prop: 'jine', center: 'right' },]
        this.tableConfigss =[      { label: '分摊明细', prop: 'meterName' },
      { label: '分摊电量(kWh)', prop: 'apportionConsumption',center:'right'},
        { label: '分摊电价(元/kWh)', prop: 'contactPhone',center:'right',width:'150'  },
        { label: '分摊电费(元)', prop: 'apportionFee', center: 'right' },
        { label: '分摊日期', prop: 'date',center:'center' }]
      } else {
        this.forlist = MakemeterWorterlist(res.data.list)
        this.tableConfigs=[      { label: '用水明细', prop: 'mingxi' },
        { label: '上期示数', prop: 'shangqi' ,center:'right'},
        { label: '本期示数', prop: 'benqi', center: 'right' },
        { label: '水量(吨)', prop: 'dianliang',center:'right'},
        { label: '单价(元/吨)', prop: 'danjia',center:'right',width:'120'  },
          { label: '水费金额(元)', prop: 'jine', center: 'right' },]
          this.tableConfigss =[      { label: '分摊明细', prop: 'meterName' },
        { label: '分摊水量(吨)', prop: 'apportionConsumption',center:'right'},
        { label: '分摊水价(元)', prop: 'contactPhone',center:'right',width:'150'  },
        { label: '分摊水费(元)', prop: 'apportionFee', center: 'right' },
        { label: '分摊日期', prop: 'date',center:'center' }]
      }
      // this.activeNames=this.forlist[0]?.meterId
      this.dialogVisibles=true
    }
  },
};
</script>
<style scoped>
::v-deep .el-dialog__footer{
  text-align: center;
}
.table{
  height: 500px;
}
</style>